import React from "react";
import { Button, message, Form, Input } from "antd";
import style from "./index.module.scss";
// mock
import api from "../../api";
import { mockXHR } from "../../mocks";
import LibraryJs from "../../library/js"; // 公共工具类

mockXHR();

class ModuleList extends React.Component {
  formRef = React.createRef();
  render(props) {
    return (
      <div className="index">
        <Form
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          className={style.loginBox}
          ref={this.formRef}
        >
          <Form.Item
            label="用户名"
            name="username"
            rules={[
              {
                required: true,
                message: "Please input your username!",
              },
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="密码"
            name="password"
            rules={[
              {
                required: true,
                message: "Please input your password!",
              },
            ]}
          >
            <Input />
          </Form.Item>
        </Form>
        <Button onClick={this.login}>登录</Button>
        <Button onClick={this.logout}>退出</Button>
      </div>
    );
  }
  componentDidMount() {}
  getButton = () => {
    const { page } = this.state;
    if (page == "edit") {
      return (
        <Button className="mr-5" type="primary" onClick={this.handleSubmit}>
          提交
        </Button>
      );
    } else if (page == "view") {
      return null;
    } else {
      return (
        <Button className="mr-5" type="primary" onClick={this.handleAddSubmit}>
          提交
        </Button>
      );
    }
  };
  login = () => {
    LibraryJs.localSet("apps", [
      {
        id: "1",
        port: 3030, // 子应用端口号 （ip与主应用相同）
        title: "子应用",
        message: "CURD 基本操作",
        icon: "icon-rukuguanli-blue",
        module: "demo",
        checked: true,
        defaultRegister: false,
        // entry: "//localhost:6651",
        routerBase: "/demo",
      },
      // {
      //   id: "2",
      //   port: 7100, // 子应用端口号 （ip与主应用相同）
      //   title: "react子应用",
      //   message: "快速采购，解决钢企复杂的采购审批流程问题",
      //   icon: "icon-fukuan-blue",
      //   module: "react16",
      //   checked: true,
      //   defaultRegister: false,
      //   // entry: "//localhost:6651",
      //   routerBase: "/react16",
      // },
    ]);
    window.location.href = "/modulelist";

    //const form = this.formRef.current
    // form.validateFields()
    //     .then(values => {
    //         // 登录
    //         api.login(values).then(({data})=>{
    //             if (data.messag === '登录成功') {
    //                 message.success('登录成功')
    //                 // 请求子应用列表
    //                 api.getNewAppConfigApi(values).then(({ data }) => {
    //                     if (data.code === 200) {

    //                         LibraryJs.localSet('apps', data.data)
    //                         setTimeout(() => {
    //                             window.location.href = '/modulelist'
    //                         }, 1000);
    //                         // this.initQiankun(data.data)
    //                         // 初始化 state
    //                         // setTimeout(() => {
    //                         //     // actions.onGlobalStateChange((state, prev) => {
    //                         //     //   // state: 变更后的状态; prev 变更前的状态
    //                         //     //   console.log('这是主应用', state, prev);
    //                         //     // }, true);
    //                         //     actions.setGlobalState(msg);
    //                         //     // actions.offGlobalStateChange();
    //                         // }, 3000);
    //                     }
    //                 }).catch(err => {
    //                     console.log(err)
    //                 })
    //             }else{
    //                 message.error('用户名或密码错误')

    //             }
    //         })

    //     })
    //     .catch(errorInfo => {
    //         console.log(errorInfo)
    //     });
  };
  logout = () => {
    LibraryJs.localDel("apps");
    message.success("退出成功");
  };
}

export default ModuleList;
